<template>
  <div class="workplace">
    <div class="workptit">
	  <div class="txt">
	    工作台
	  </div>
	  <div class="contxt">
	    <div class="contxtimg">
			<img src="../../img/Tx.png" />
			<div>
				<p> 早安，Serati Ma ，祝你开心每一天！</p>
				<p>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</p>
			</div>
		</div>
	    <div class="contxtdata">
			<div class="data">
				<div>项目数</div>
				<div>56</div>
			</div>
			<div class="data">
				<div>团队内排名</div>
				<div>8/24</div>
			</div>
			<div class="data">
				<div>项目访问</div>
				<div>2,223</div>
			</div>
		</div>
	  </div>
	</div>
	<div class="center">
		<div class="center_left">
			<div style="margin-bottom: 24px;">
				<a-card title="进行中的项目">
					<a slot="extra" href="#">全部项目</a>
					<a-card-grid style="width:33.333%;" v-for="(item,ind) in cardContxt" :key="ind">
						<div class="center_left_crad">
							<div class="center_left_crad_img">
								<img :src="item.img" />
								<span>{{item.icon}}</span>
							</div>
							<div class="card-description">
								{{item.description}}
							</div>
							<div class="card-footer">
								<p>{{item.team}}</p>
								<span>9{{item.date}}</span>
							</div>
						</div>
					</a-card-grid>
				</a-card>
			</div>
			<div style="margin-bottom: 24px;">
				<a-card title="动态">
					<dynamic :dynamicContxt="dynamicContxt" />
				</a-card>
			</div>
		</div>
		<div class="center_right">
			<div style="margin-bottom: 24px;">
				<a-card title="快速开始 / 便捷导航">
					<div class="center_right_a">
						<div>操作一</div>
						<div>操作二</div>
						<div>操作三</div>
						<div>操作四</div>
						<div>操作五</div>
						<a-button size="small" icon="plus">
							添加
						</a-button>
					</div>
				</a-card>
			</div>
			<div style="margin-bottom: 24px;">
				<a-card title="xx 指数">
					<div class="center_right_chart">
						
					</div>
				</a-card>
			</div>
			<div style="margin-bottom: 24px;">
				<a-card title="团队">
					<te-am :teamContxt="teamContxt" />
				</a-card>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
import team from '@/components/team.vue'
import dynamic from '@/components/dynamic.vue'
export default {
	name: 'workplace',
	data() {
		return {
			cardContxt: [],
			dynamicContxt: [],
			teamContxt: []
		}
	},
	components: {
		"te-am": team,
		"dynamic": dynamic
	},
	created(){
		this.cardContxt = this.$store.state.cardContxt
		this.dynamicContxt = this.$store.state.dynamicContxt
		this.teamContxt = this.$store.state.teamContxt
		let newUser = JSON.parse(sessionStorage.getItem('IsNewUser'))
		this.Newhint(newUser)
	},
	methods: {
		Newhint(newUser){
			if(newUser){
				this.$notification['success']({
					message: '欢迎回来！'
				})
				sessionStorage.setItem("IsNewUser", JSON.stringify(false))
			}
		}
	}
}
</script>
<style lang="less" scoped>
	.workptit{
		box-sizing: border-box;
		padding: 24px;
		background-color: white;
		.txt{
			font-weight: 600;
			font-size: 20px;
			color: rgba(0,0,0,.85);
		}
		.contxt{
			display: flex;
			padding-top: 12px;
			.contxtimg{
				flex: 5;
				display: flex;
				img {
					width: 72px;
					height: 72px;
				}
				div{
					margin-left: 24px;
					p:nth-child(1){
						font-weight: 500;
						font-size: 20px;
					}
					p:nth-child(2){
						color: rgba(0,0,0,.45);
					}
				}
			}
			.contxtdata{
				flex: 2;
				display: flex;
				.data{
					padding: 0 32px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					div:nth-child(1){
						margin-bottom: 4px;
						color: rgba(0,0,0,.45);
						font-size: 14px;
					}
					div:nth-child(2){
						color: rgba(0,0,0,.85);
						font-size: 24px;
					}
				}
			}
		}
	}
	.center{
		margin: 24px 24px 0;
		display: flex;
		.center_left{
			width: 65%;
			margin-right: 12px;
			.center_left_crad{
				font-size: 14px;
				.center_left_crad_img{
					display: flex;
					margin-bottom: 8px;
					align-items: center;
					img{
						width: 24px;
						height: 24px;
						border-radius: 50%;
					}
					span{
						color: rgba(0,0,0,.85);
						font-weight: 500;
						margin-left: 12px;
						cursor:pointer;
					}
					span:hover{
						color: blueviolet;
					}
				}
				.card-description{
					color: rgba(0,0,0,.45);
					height: 44px;
				}
				.card-footer{
					display: flex;
					font-size: 12px;
					color: rgba(0,0,0,.45);
					margin-top: 8px;
					justify-content: space-between;
					p{
						cursor:pointer;
					}
					p:hover{
						color: blueviolet;
					}
				}
			}
		}
		.center_right{
			width: 34%;
			margin-left: 12px;
			.center_right_a{
				display: flex;
				flex-wrap: wrap;
				div{
					width: 33.33%;
					margin-bottom: 10px;
					cursor:pointer;
				}
			}
			.center_right_chart{
				width: 100%;
				height: 350px;
			}
		}
	}
</style>
